<template>
	<view class="main">
		<TopBar :indexflag="true" :combakflag="true" :lang="false" :bottom="true" :title="$t('ManageTable')"
			:barstyle="colortopic()" Color="#fff"></TopBar>
		<view class="shop-list" :dir="i18nLocale=='ug'?'rtl':''">
			<view class="shop-item" v-for="(item,index) in productList">
				<view class="left">
					<view class="shop-content">
						<view class="title">{{item.number}}</view>
					</view>
				</view>
				<view class="right">
					<view class="button delet" @click="wechatCode(item)">
						<u-icon name="grid" color="#494FB6" size="22"></u-icon>
						<text class="" style="#494FB6">{{$t('TableCode')}}</text>
					</view>
					<view class="button edit" @click="addTable(item)">
						<u-icon name="edit-pen" color="#f9ae3d" size="22"></u-icon>
						<text>{{$t('EditShop')}}</text>
					</view>
					<view class="button delet" @click="delettable(item.id)">
						<u-icon name="trash" color="#cc0000" size="22"></u-icon>
						<text class="" style="#cc0000">{{ $t('Delete')}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-button">
			<view class="button-item" @click="addTable">
				<u-icon name="plus-circle" :color="colortopic()" size="22"></u-icon>
				<text>{{$t('TableAdd')}}</text>
			</view>
		</view>
		<u-popup :show="popshow" :round="7" mode="center" @close="close" @open="open">
			<view :class="i18nLocale=='ug'?'ug-from pop-box' :'pop-box'">
				<view class="pop-title">{{$t('TableAdd')}}</view>
				<view class="input-item" style="padding-top: 20rpx;">
					<u--input v-model="tablenumber" :placeholder="$t('TableNumber')" type="number" fontSize="28rpx"
						:adjustPosition='false'></u--input>
				</view>
				<view class="button-grop">
					<view class="button" :style="{color:colortopic()}" @click="confadd">{{$t('Confirm')}}</view>
				</view>
			</view>
		</u-popup>
		<!-- 竖排 -->
		<!-- <u-popup :show="codepop" :round="10" mode="center" @close="codeClose" @open="codeOpen">
			<image :src="path" mode="widthFix"></image>
			<l-painter isCanvasToTempFilePath @success="path = $event" hidden
				css="width: 425rpx; height:595rpx;background:#fff;background-image:url('https://restaurant.dikidiki.cn/data/code-bg.jpg')">

				
				<l-painter-qrcode css="width: 170rpx; height: 170rpx;margin:0 auto; margin-top:263rpx;background:#fff"
					:text="code_url"></l-painter-qrcode>
				
				<l-painter-view
					css="width:100%;margin-top: 40rpx; font-size: 26rpx;display:flex;justify-content:center; color: #8c5400">
					<l-painter-text :text="table_num"
						css="color:#129363; font-size: 50rpx;text-align:center;fontWeight:bold" />
				</l-painter-view>
			</l-painter>
			<button @click="downloadCanvas" style="margin-bottom: 10rpx;">{{$t('SanePone')}}</button>
		</u-popup> -->
		
		<!-- 横排 -->
		<u-popup :show="codepop" :round="10" mode="center" @close="codeClose" @open="codeOpen">
			<image :src="path" mode="widthFix"></image>
			<l-painter isCanvasToTempFilePath @success="path = $event" hidden
				css="width: 875px; height:621px;background:#fff;background-image:url('https://restaurant.dikidiki.cn/data/code-bg.jpg')">
		
				<!-- 二维码 -->
				<l-painter-qrcode css="width: 170rpx; height: 170rpx;margin:0 auto; margin-top:263rpx;background:#fff"
					:text="code_url"></l-painter-qrcode>
				<!-- 桌号 -->
				<l-painter-view
					css="width:100%;margin-top: 40rpx; font-size: 26rpx;display:flex;justify-content:center; color: #8c5400">
					<l-painter-text :text="table_num"
						css="color:#129363; font-size: 50rpx;text-align:center;fontWeight:bold" />
				</l-painter-view>
			</l-painter>
			<button @click="downloadCanvas" style="margin-bottom: 10rpx;">{{$t('SanePone')}}</button>
		</u-popup>
		<u-toast ref="uToast" :message="notmessage"></u-toast>
		<Loading :show="loadshow" bgZindex="99" iconName="circle-round" :showText="false"></Loading>
	</view>
</template>

<script>
	import {
		gettables,
		posttable,
		puttable,
		deletetable
	} from '@/api/shop.js';
	export default {
		components: {
			
		},
		data() {
			return {
				productList: [],
				notmessage: '请仔细填写!',
				popshow: false,
				codepop: false,
				tablenumber: '',
				edit_id: '',
				code_url: '',
				table_num: '',
				loadshow: true,
				path: ''
			};
		},
		onReady() {

		},
		onLoad() {
			this.getTables()
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		methods: {

			getTables() {
				let that = this;
				gettables({}).then((res) => {
					if (res.code == 200) {
						let data = res.body.data;
						that.productList = data;
						that.loadshow = false;
					}
				})
			},
			//添加
			confadd() {
				let that = this;
				that.popshow = false;
				if (!that.tablenumber) {
					that.$refs.uToast.show({
						top: 0,
						message: this.$t('TableEmpty'),
						color: '#fff',
						bgColor: '#f0ba53'
					})
					return;
				}

				if (that.edit_id) {
					puttable({
						id: that.edit_id,
						number: that.tablenumber
					}).then((res) => {
						if (res.code == 200) {
							that.getTables();
							that.tablenumber = '';
							that.$refs.uToast.show({
								top: 0,
								message: this.$t('EditSuccessful'),
								color: '#fff',
								bgColor: '#f0ba53'
							})
						} else {
							that.$refs.uToast.show({
								top: 0,
								message: this.$t('EditFailed'),
								color: '#fff',
								bgColor: '#f0ba53'
							})
						}
					})
				} else {
					posttable({
						number: that.tablenumber
					}).then((res) => {
						if (res.code == 200) {
							that.getTables();
							that.tablenumber = '';
							that.$refs.uToast.show({
								top: 0,
								message: this.$t('AdditionSuccessful'),
								color: '#fff',
								bgColor: '#f0ba53'
							})
						} else if (res.code == 422) {
							that.$refs.uToast.show({
								top: 0,
								message: this.$t('NumbersCannotRepeated'),
								color: '#fff',
								bgColor: '#f0ba53'
							})
						} else {
							that.$refs.uToast.show({
								top: 0,
								message: this.$t('AdditionFailed'),
								color: '#fff',
								bgColor: '#f0ba53'
							})
						}
					})
				}
			},
			//删除桌子
			delettable(id) {
				let that = this;
				deletetable({
					id: id
				}).then((res) => {
					if (res.code == 200) {
						that.getTables();
						that.$refs.uToast.show({
							top: 0,
							message: this.$t('DeleteSuccessful'),
							color: '#fff',
							bgColor: '#f0ba53'
						})
					} else {
						that.$refs.uToast.show({
							top: 0,
							message: this.$t('DeleteFailed'),
							color: '#fff',
							bgColor: '#f0ba53'
						})
					}
				})
			},
			change(e) {
				this.status = e;
			},
			wechatCode(item) {
				this.codepop = true;
				this.table_num = item.number;
				this.code_url = 'https://restaurant.dikidiki.cn/miniprogram?shop_id=' + item.shop_id + '&table_num=' + item
					.number;
			},
			open() {},
			close() {
				this.popshow = false
			},
			codeOpen() {},
			codeClose() {
				this.codepop = false;
			},
			//添加商品
			addTable(item) {
				if (item) {
					this.tablenumber = item.number;
					this.edit_id = item.id;
				}
				this.popshow = true;
			},
			//下载图片
			downloadCanvas() {
				uni.getSetting({ //获取用户的当前设置
					success: res => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum()
						} else {
							uni.authorize({ //重新发起获取授权
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum()
								},
								fail: () => {
									uni.showToast({
										title: '请打开保存相册权限，再点击保存相册分享',
										icon: 'none',
										duration: 2000
									})
									let timer = setTimeout(() => {
										clearTimeout(timer)
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: e => {}
										})
									}, 2000)
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum() {
				var imgSrc = this.path.slice(22) //base64编码
				// console.log(imgSrc, '++++++++')
				var number = Math.random()
				wx.getFileSystemManager().writeFile({
					filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.jpg',
					data: imgSrc,
					encoding: 'base64',
					success: res => {
						wx.saveImageToPhotosAlbum({
							filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.jpg',
							success: function(res) {
								wx.showToast({
									title: '保存成功',
								})
							},
							fail: function(err) {
								console.log(err)
							}
						})
						console.log(res)
					},
					fail: err => {
						console.log(err)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.shop-list {
		width: 100%;
		height: 100%;

		.shop-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			background-color: $uni-bg-color-box;
			border-radius: $uni-border-radius-base;
			box-shadow: $uni-bg-shadow;
			margin-top: 30rpx;
			padding: $uni-spacing-padding-sm;

			.left {

				display: flex;
				align-items: center;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: $uni-border-radius-lg;
				}

				.shop-content {
					height: 200rpx;
					box-sizing: border-box;
					padding: 20rpx;
					display: flex;
					align-items: center;

					.title {
						color: #fff;
						font-size: $uni-font-size-lg ;
						width: 60rpx;
						height: 60rpx;
						padding: 10rpx;
						background-color: $uni-color-topic ;
						border-radius: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}


				}
			}

			.right {
				display: flex;
				align-items: center;
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm1;

				.button {
					padding: 5rpx 10rpx;
					border-radius: $uni-border-radius-lg;
					margin: 0rpx 10rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					text {
						padding: 10rpx 0rpx;
					}
				}

			}
		}

	}

	.footer-button {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		left: 0;

		.button-item {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		text {
			padding: 0rpx 20rpx;
		}
	}

	.pop-box {
		width: 600rpx;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.pop-title {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0rpx;
		}

		.input-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: $uni-spacing-padding-sm 40rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			input {
				font-size: $uni-font-size-base;
				// border: 1rpx solid #999;
				text-align: center;
			}

			.title {
				color: $uni-color-title;
				font-size: $uni-font-size-base;
				padding: 0rpx 10rpx;
				// padding: 0rpx 30rpx;'
			}
		}

		.button-grop {
			display: flex;
			justify-content: center;
			margin-top: 80rpx;

			.button {
				border: 1rpx solid #999;
				padding: 10rpx 30rpx;
				border-radius: 20rpx;
			}
		}
	}

	.ug-from {
		// direction: rtl;

		/deep/ .uni-input-input {
			// direction: rtl !important;
			// text-align: right;
			text-align: center;
		}

		/deep/ .uni-input-placeholder {
			// text-align: right;
			text-align: center;
		}
	}
</style>